<template>
	<view class="box">
		<view class="bg" :style="{background:'url('+ $BASE_URL +picList[0]  +')',backgroundSize:'100%'}">
			<view class="header" :style="{background:'url('+ $BASE_URL +picList[1]  +')',backgroundSize:'100%'}">
				<view class="cardbox">
					<view class="cardbox-item"
						:style="{background:'url('+ $BASE_URL +picList[2]  +')',backgroundSize:'100%'}">
						<view class="cardbox-item-left">
							<view class="" style="font-size: 24rpx;color: #fe3452;margin-top: 4rpx;margin-left: 4rpx;">
								满减神券
							</view>
							<view class="" style="margin-top: 18rpx;margin-left: 18rpx;">
								<text style="font-size: 60rpx;color: #be0000;">200</text>
								<text style="font-size: 22rpx;color: #be0000;">元</text>
							</view>
						</view>
						<view class="cardbox-item-right" style="width: 130rpx;">
							<view class=""
								style="font-size: 20rpx;color: #be0000;margin: 20rpx auto;text-align: center;margin-top: 32rpx;">
								满6000可用
							</view>
							<view class=""
								style="margin: 0rpx auto;background-color: #ff2e30;color: #fff;font-size: 20rpx;text-align: center;height: 32rpx;line-height: 32rpx;width: 104rpx;border-radius: 18rpx;">
								立即领取
							</view>
						</view>
					</view>
					<view class="cardbox-item"
						:style="{background:'url('+ $BASE_URL +picList[2]  +')',backgroundSize:'100%'}">

					</view>
					<view class="cardbox-item"
						:style="{background:'url('+ $BASE_URL +picList[2]  +')',backgroundSize:'100%'}">

					</view>
					<view class="cardbox-item"
						:style="{background:'url('+ $BASE_URL +picList[2]  +')',backgroundSize:'100%'}">
					</view>
				</view>

			</view>


			<view class="" style="margin-top: 70rpx;display: flex;justify-content: center;margin-bottom: 30rpx;">
				<image :src="$BASE_URL +picList[4] " mode="aspectFill" style="width: 382rpx;height:34rpx;"></image>
			</view>


			<view class="goodslist">
				<view class="good">
					<view class="good_left">

					</view>
					<view class="good_right">
						<view class="row1"  style="font-size: 30rpx;font-weight: 700;">
							iPhone 14 Pro max
						</view>

						<view class="row2" style="font-size: 22rpx;color: #fa6e3e;margin: 30rpx 0 20rpx 0;">
							4800万像素主摄丨 a16强势驱动
						</view>
						<view class="row3"  style="font-size: 22rpx;margin-bottom: 20rpx;">
							新用户专享 丨 信用免押 丨 顺丰包邮
						</view>
						<view class="row4" style="position: relative;">
							<view class="" style="position: absolute;top: 0;left: 0;z-index: 99;">
								<view class="" style="font-size: 20rpx;color: #fd465b;margin-top: 4rpx;margin-left: 10rpx;">
									已补贴200元
								</view>
								<view class="" style="font-size: 26rpx;color: #fff;margin-top: 15rpx;margin-left: 10rpx;">
									券后价 ￥20/天 
								</view>
							</view>
							<image :src="$BASE_URL +picList[3] " mode="aspectFill" style="width:355rpx;height:86rpx;">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="" style="margin-top: 70rpx;display: flex;justify-content: center;margin-bottom: 30rpx;">
				<image :src="$BASE_URL +picList[5] " mode="aspectFill" style="width: 680rpx;height:134rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picList: []
			}
		},
		mounted() {
			this.$http('common.getPic', {}).then(res => {
				if (res.code === 1) {
					this.picList = res.data.result.activetwo
				}
			});
		},
		methods: {

		},

	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;

		.bg {
			width: 100%;
			min-height: 100vh;
			background-size: cover !important;
			background-repeat: no-repeat;
			padding-top: 100rpx;
			padding-bottom: 30rpx;


			.header {
				height: 928rpx;
				width: 100%;
				background-size: cover !important;
				background-repeat: no-repeat;
				position: relative;

				.cardbox {
					position: absolute;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					bottom: 20rpx;
					width: 668rpx;
					height: 400rpx;
					// background-color: aquamarine;
					left: 50%;
					transform: translateX(-50%);
					padding: 20rpx 10rpx;
					box-sizing: border-box;

					.cardbox-item {
						display: flex;
						justify-content: space-between;
						width: 314rpx;
						height: 138rpx;
						background-size: contain !important;
						background-repeat: no-repeat !important;
					}
				}
			}


		}

		.goodslist {


			.good {
				margin: 0 auto;
				width: 710rpx;
				height: 318rpx;
				border-radius: 20rpx;
				background-color: #fff;

				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 25rpx;

				.good_left {
					width: 260rpx;
					height: 260rpx;
					border-radius: 20rpx;
					background-color: antiquewhite;
					overflow: hidden;
				}

				.good_right {
					width: 370rpx;
					height: 260rpx;
					// background-color: cadetblue;
				}
			}
		}

	}
</style>
